// lesshint-disable spaceAroundComma
#query-generator {

  h2 {
    color: #192147;
    font-size: 32px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  h3 {
    color: #192147;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  p {
    color: @core-fleet-black-75;
  }
  label {
    font-weight: 700;
    color: #192147;
    font-size: 14px;
    line-height: 1.2;
    margin-bottom: 16px;
  }

  [purpose='page-container'] {
    padding: 64px;
  }
  [purpose='page-content'] {
    max-width: 800px;
    margin: auto;
  }
  [purpose='page-headline'] {
    margin-bottom: 32px;
  }
  [purpose='query-form'] {
    padding-bottom: 32px;
  }
  [purpose='ai-note'] {
    padding-bottom: 32px;
    p {
      margin-bottom: 0px;
      color: #515774;
      font-family: Inter;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
    }
  }
  [purpose='caveats'] {
    margin-bottom: 32px;
    li {
      color: #515774;
      font-family: Inter;
      font-size: 15px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px; /* 160% */
    }
  }
  [purpose='form'] {
    margin-bottom: 16px;
    textarea {
      &::placeholder {
        font-style: italic;
      }
      border-radius: 6px;
      border: 1px solid var(--Fleet-Black-25, #C5C7D1);
      background: var(--White, #FFF);
    }
  }
  [purpose='submit-button'], [purpose='reset-button'] {
    display: flex;
    width: 150px;
    font-size: 14px;
    line-height: 1.5;
    margin-top: 16px;
    padding: 16px 32px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    background: @core-vibrant-green;
  }


  [purpose='note'] {
    display: flex;
    padding: 16px 24px;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    border-radius: 8px;
    background: #F4F4FF;
    margin-bottom: 32px;
    img {
      width: 16px;
      height: 16px;
    }
    p {
      margin-bottom: 0px;
      color: #515774;
      font-size: 14px;
      font-weight: 400;
      line-height: 150%;
    }
  }
  [purpose='codeblock'] {
    margin-top: 24px;
    [purpose='codeblock-tabs'] {
      background: var(--UI-Fleet-Black-5, #F4F4F6);
      border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      border-radius: 4px 4px 0px 0px;
      height: 35px;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
    [purpose='codeblock-tab'] {
      border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      cursor: pointer;
      height: 35px;
      padding: 8px 24px;
      color: #000;
      display: flex;
      font-family: Inter;
      font-size: 12px;
      font-style: normal;
      font-weight: 700;
      line-height: 18px; /* 150% */
      [purpose='new-badge'] {
        color: #FFF;
        font-family: 'Source Code Pro';
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
        line-height: 11px; /* 110% */
        display: inline-flex;
        padding: 2px 8px;
        justify-content: center;
        align-items: center;
        margin-left: 10px;
        border-radius: var(--spacing-half, 4px);
        border: 1px solid var(--UI-Fleet-Black-50, #8B8FA2);
        background: var(--UI-Fleet-Black-50, #8B8FA2);
        height: 19px;
      }
      &.selected {
        [purpose='new-badge'] {
          height: 19px;
          border-radius: var(--spacing-half, 4px);
          border: 1px solid var(--color-brand-blue, #0587FF);
          background: var(--color-brand-blue, #0587FF);
        }
        background: #F9FAFC;
        border-radius: 4px 4px 0px 0px;
        border-top: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
        border-bottom: 1px solid var(--UI-Fleet-Black-10, #F9FAFC);
      }
    }
    padding: 0;
    position: relative;
    [purpose='copy-button-tab'] {
      width: 100%;
      height: 35px;
      border-radius: 4px 4px 0px 0px;
      border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
      border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
    }
    [purpose='copy-button'] {
      position: absolute;
      top: 2px;
      right: 10px;
      border-radius: 8px;
      height: 32px;
      width: 32px;
      background: url('/images/icon-copy-16x16@2x.png');
      background-size: 14px 14px;
      background-position: center;
      background-repeat: no-repeat;
      cursor: pointer;
      &.copied {
        background: url('/images/icon-copy-clicked-checkmark-no-background-32x32@2x.png');
        background-size: 32px 32px;
        background-repeat: no-repeat;
        background-position: center;
      }
    }
  }

  pre {
    width: 100%;
    max-width: 100%;
    margin-bottom: 24px;
    padding: 16px 44px 16px 24px;
    border-right: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
    border-left: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
    border-bottom: 1px solid var(--UI-Fleet-Black-10, #E2E4EA);
    background: #F9FAFC;
    border-radius: 0px 0px 4px 4px;
    .ps, .sh {
      .hljs-keyword,
      .hljs-selector-tag,
      .hljs-name {
        color: #AE6DDF;
      }

      .hljs-symbol,
      .hljs-attribute,
      .hljs-function-keyword,
      .hljs-attr,
      .hljs-class,
      .hljs-title,
      .hljs-string,
      .hljs-type,
      .hljs-builtin-name,
      .hljs-selector-id,
      .hljs-selector-attr,
      .hljs-selector-pseudo,
      .hljs-addition,
      .hljs-variable,
      .hljs-template-variable {
        color: #4fd061;
      }
      .hljs-comment,
      .hljs-deletion,
      .hljs-meta {
        color: @core-fleet-black-50;
      }
    }
    code {
      color: #515774;
      &.has-linebreaks {
        white-space: break-spaces;
      }
      &.no-linebreaks {
        word-break: break-word;
        white-space: normal;
      }
      font-family: 'Source Code Pro';
      font-size: 14px;
      font-weight: 400;
      line-height: 150%;
      .hljs-keyword { // SQL keywords (SELECT, FROM, WHERE, IN, etc.)
        color: #AE6DDF;
      }
      [purpose='line-break']:not(:first-of-type)::before {
        content: '\a';
      }
      .hljs-attr { // For table and column names
        .hljs-keyword {
          color: #FFF;
        }
        .hljs-string { // For words wrapped in quotation marks
          color: #FFF;
        }
        color: #FFF;
        background-color: #AE6DDF;
        border-radius: 3px;
        white-space: pre;
        vertical-align: baseline;
        span {
          padding: 0;
        }
      }
      .hljs-number {
        color: #f5871f;
      }
      .hljs-string { // For words wrapped in quotation marks
        color: #4fd061;
        .hljs-keyword {
          color: #4fd061;
        }
      }
      background-color: @ui-off-white;
      border: none;
      padding: 0;
    }
  }

  @media (max-width: 991px) {
    [purpose='page-container'] {
      padding: 32px 32px 64px 32px;
    }
  }

  @media (max-width: 768px) {

  }

  @media (max-width: 575px) {
    [purpose='page-container'] {
      padding: 32px 24px 64px 24px;
    }
    [purpose='codeblock'] {
      [purpose='copy-button'] {
        top: 2px;
        right: 5px;
      }
    }
  }

}
